<template>
  <div class="start-board">
    <div
      class="start-board-text animate__animated animate__heartBeat"
      v-if="$store.state.user.red_or_blue === 0">
      匹配成功！你是蓝色方
    </div>
    <div
      class="start-board-text animate__animated animate__heartBeat"
      v-if="$store.state.user.red_or_blue === 1">
      匹配成功！你是红色方
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();

    // 清除StartBoard
    const clearStartBoard = () => {
      setTimeout(() => {
        store.commit("updateBeforeStart", "none");
      }, 1500);
    };

    clearStartBoard();

    return {
      clearStartBoard,
    };
  },
};
</script>

<style scoped>
div.start-board {
  height: 30vh;
  width: 40vw;
  background-color: rgba(50, 50, 50, 0.66);
  position: absolute;
  top: 35vh;
  left: 30vw;
}

div.start-board-text {
  text-align: center;
  color: white;
  font-size: 50px;
  font-weight: 600;
  font-style: italic;
  padding-top: 5vh;
}

div.start-board-btn {
  text-align: center;
  padding-top: 7vh;
}
</style>
